<template>
  <view class="house-details-wrap">
    <view class="swiper">
      <up-swiper
        :list="currentHouseType?.realisticePictureList"
        indicator
        indicatorMode="line"
        circular
      />
      <!--      <view class="vr-btn" @click="goRoutePage">VR看房</view>-->
    </view>
    <view class="house-details-tab">
      <up-tabs
        :list="houseTypeList"
        :lineWidth="`${rpx2px(71)}px`"
        :line-height="rpx2px(11)"
        @change="onCurrentTab"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
      />
      <view class="house-details-card">
        <text class="house-details-text">
          {{ currentHouseType.smallHouseTypeName }}
        </text>
        <view class="house-details-price">
          租金标准：{{ currentHouseType.housePrice }}元/月
          <text class="price-remark">
            {{ currentHouseType.remark }}
          </text>
        </view>
        <view class="house-details-introduce">
          <text class="title">
            {{ currentHouseType.title }}
          </text>
          <up-parse :content="currentHouseType.detail" />
        </view>
      </view>
    </view>
    <Box title="配套设施" :headerPadding="10" className="light">
      <view class="house-details-box">
        <text class="text">基础设施</text>
        <facilitiesItem :list="currentHouseType.facilitiesInfoVo" type="1" />
      </view>
      <view class="house-details-box">
        <text class="text">可选配套设施</text>
        <facilitiesItem :list="currentHouseType.facilitiesInfoVo" type="2" />
      </view>
    </Box>
    <u-tabbar
      :value="tabVal"
      @change="onTaberClick"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        v-for="item in currentHouse"
        :key="item.title"
        :text="item.title"
      >
        <template v-slot:active-icon>
          <image class="slot-icon" :src="imgUrl + item.urlOne" />
        </template>
        <template v-slot:inactive-icon>
          <image class="slot-icon" :src="imgUrl + item.urlTwo" />
        </template>
      </u-tabbar-item>
    </u-tabbar>
    <up-popup :show="showPopup" :round="10" mode="bottom" @close="close">
      <my-tab
        boxName="popup"
        :tabBars="tel.list"
        :current="tel.active"
        @on-current-tab="onTelCurrentTab"
      >
        <view class="house-customer-item" v-if="tel.active === 0">
          咨询电话：
          <text class="photo" @tap="onPhoneCall">{{ tel.data }}</text>
        </view>
        <view class="house-customer-item" v-if="tel.active === 0">
          座机电话：
          <text class="photo" @tap="onPhoneCall">{{ tel.landlinePhone }}</text>
        </view>
        <view class="house-customer-item" v-else>
          <image
            class="customer-img"
            :src="tel.img"
            :show-menu-by-longpress="true"
          />
        </view>
      </my-tab>
    </up-popup>
    <uni-popup
      ref="goRealNameAuthenticationPopupRef"
      type="center"
      round
      background-color="#fff"
       @mask-click="handleCloseGoRealNamePopup"
    >
      <view class="go-real-name-authentication-popup">
        <view class="go-real-name-authentication-popup-text">
          您还未实名认证
        </view>
        <view
          class="go-real-name-authentication-popup-btn"
          @click="goRealNamePage"
        >
          去实名认证
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { getUserInfoApi } from "@/api/user";
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { getDictConfigListByType } from "@/package_kuafu_apartment/pages/api/home";
import { getFacilitiesInfoList } from "@/package_kuafu_apartment/pages/api/house-details";
import MyTab from "@/package_kuafu_apartment/pages/components/tabs/index.vue";
import Box from "@/components/box/index.vue";
import facilitiesItem from "@/package_kuafu_apartment/pages/home/components/facilities-item/index.vue";
import { customNav } from "@/utils/customNav";
import { rpx2px } from "@/utils/utils";
let imgUrl = import.meta.env.VITE_APP_IMGURL;
const goRealNameAuthenticationPopupRef = ref();
const userInfo = ref();
const currentHouse = ref([
  {
    title: "预约看房",
    urlOne: "2024-04-22/1713767212166yuyuekanfang@2x(1).png",
    urlTwo: "2024-04-22/1713767229423yuyuekanfang@2x.png",
  },
  {
    title: "联系我们",
    urlOne: "2024-04-22/1713767500409lianxiwomen.png",
    urlTwo: "2024-04-22/1713767442393lianxiwomen (1)@2x.png",
  },
  {
    title: "预订",
    urlOne: "2024-04-22/1713767538855yuding.png",
    urlTwo: "2024-04-22/1713767549294yuding@2x.png",
  },
]);
const tabVal = ref("");
const showPopup = ref(false);
const tel = reactive({
  list: [
    { name: "电话联系", id: 0 },
    { name: "微信联系", id: 1 },
  ],
  active: 0,
  data: "",
  img: "",
  landlinePhone: "",
});
onShow(() => {
  tabVal.value = "";
  getUserInfo();
});
onLoad((option) => {
  getHouseTypeDataList(option.houseTypeBigId);
  showPhoneData();
});

const houseTypeList = ref([]);
const currentHouseType = ref({});
const getHouseTypeDataList = async (houseId) => {
  let res = await getFacilitiesInfoList({ id: houseId });
  let { data, code } = res;
  if (code === 200) {
    houseTypeList.value = data.map((v) => {
      return {
        name: `${v.smallHouseTypeName}
         （面积约${v.area}m²）`,
        ...v,
      };
    });
    currentHouseType.value = data[0];
  }
};
const onCurrentTab = (item) => {
  console.log("切换标签",item);
  console.log("houseTypeList.value",houseTypeList.value);
  let tabName = item.index;
  // /* #ifdef MP-WEIXIN */
  // tabName =
  //   item?._relatedInfo?.anchorRelatedText ||
  //   item?._relatedInfo.anchorTargetText;
  // /* #endif */

  // /* #ifndef MP-WEIXIN */
  // tabName = item.name;
  // /* #endif */
  
  currentHouseType.value = houseTypeList.value[tabName];
  console.log("currentHouseType.value",currentHouseType.value);
  
};
/**
 * 获取用户信息
 * @returns {Promise<void>}
 */
const getUserInfo = async () => {
  const res = await getUserInfoApi();
  const { code, data } = res;
  if (code === 200) {
    userInfo.value = data;

    // console.log("userInfo.value",userInfo.value);
  }
};
function handleCloseGoRealNamePopup () {
  console.log("触发函数");
  tabVal.value = "";
}
const onTaberClick = (e) => {
  console.log("下标", e);

  tabVal.value = e;
  const { hasIdCard } = userInfo.value;
  console.log("userInfo.value", userInfo.value);
  console.log("hasIdCard", hasIdCard);

  switch (e) {
    case 0:
      if (!hasIdCard) {
        goRealNameAuthenticationPopupRef.value.open();
      } else {
        customNav(
          `/package_kuafu_apartment/pages/home/pages/book-room/index?smallId=${currentHouseType.value.id}`
        );
      }

      break;
    case 1:
      showPopup.value = true;
      break;
    case 2:
      if (!hasIdCard) {
        goRealNameAuthenticationPopupRef.value.open();
      } else {
        customNav(
          `/package_kuafu_apartment/pages/home/pages/reserve/index?houseName=${currentHouseType.value.smallHouseTypeName}&amount=${currentHouseType.value.housePrice}&smallId=${currentHouseType.value.id}&deposit=${currentHouseType.value?.deposit}&reservePrice=${currentHouseType.value?.reservePrice}`
        );
      }

      break;
    case 3:
      let payData = {
        appid: "wx0ae1c7463138cd07",
        timeStamp: "1713839054",
        nonceStr: "bced353e8bb8485896e54d27b3cf6245",
        prepayId: "prepay_id=wx231024148184694afd835e1ac528db0001",
        signType: "RSA",
        paySign:
          "wEXnkB7eaui0b51H4BNMJU2/WfEY/ZrFosDl2Ai+myVc3tYD7H2um2eCJ2NMoOCeZo/YK2+DpRA0hXZxktS5f25jQzOfpgxaTdzVsp8xbLNMgqg4TldLjnD+Xoyqhx/J+SLifa/x/s8/YUoJ9TgvFN5qcmEEmdX+8fpOJynV/aJQEzn4wl1LRHN30dbCtMeDu7P2ua+TvJUUgG4LF9uVlxh2MwVDWlYLyOE+Wc1pql1n3PriPt0UD5Ulof1UEw0CHtGxf3xmoiZX2QV+bdI0/tZoeSvo0t0jPd4CB04TnO1OeMZm8zYhLqDmC5Q+ECCf+TmbdCReqcwSxLbkhK7rJw==",
      };
      uni.requestPayment({
        provider: "wxpay",
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.prepayId,
        signType: payData.signType,
        paySign: payData.paySign,
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });
      break;

    default:
      break;
  }
};
/**
 * 跳转到实名认证页面
 */
const goRealNamePage = () => {
  customNav("/package_user/pages/user/name-authentication");
};
function close() {
  showPopup.value = false;
  tabVal.value = "";
}

const showPhoneData = async () => {
  let res = await getDictConfigListByType("1");
  let { data, code } = res;
  if (code === 200) {
    let vm = data[0].children;
    tel.data = vm[0].filedName;
    tel.img = vm[1].disposeResourceUrl;
    tel.landlinePhone = vm[2].filedName;
  }
};
const onPhoneCall = () => {
  uni.makePhoneCall({
    phoneNumber: tel.data,
  });
};
function onTelCurrentTab(e) {
  tel.active = e;
}
</script>
<style lang="less" scoped>
@import "./style/index.less";
</style>
